<template>
    <div>
        <svg :class="comClass" aria-hidden="true">
            <use :xlink:href="'#' + name" :fill="fill"></use>
        </svg>
    </div>
</template>

<script setup lang="ts">
import { computed } from "vue"


interface SVG {
    name?: string
    fill?: string
    size?: string
}



let props = withDefaults(defineProps<SVG>(), {
    name: () => {
        return "excel"
    },
    fill: () => {
        return "8e9199"
    },
    size: () => {
        return "mini"
    }
})


let comClass = computed(() => {
    return "icon " + "icon-" + props.size
})
</script>

<style scoped lang="scss">
.icon {
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    width: 1em;
    height: 1em;
}

.icon-mini {
    width: 1em;
    height: 1em;
}

.icon-middle {
    width: 2em;
    height: 2em;
}

.icon-big {
    width: 3em;
    height: 3em;
}
</style>